<template>
    <div class="left">
        <div class="left-top" :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none' }">
            <div
                :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none', textAlign: scaleX === -1 ? 'right' : 'left' }">
                {{ title }}</div>
        </div>
        <div class="left-bottom">
            <div ref="chartContainer" class="chart-container" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    title: {
        type: String,
        default: '标题'
    },
    scaleX: {
        type: Number,
        default: 1
    },
    option: {
        type: Object,
        default: () => ({})
    }
});

const chartContainer = ref(null);
let chartInstance = null;
let timer = null;

// 1. 直接在组件内部定义 option
var charts = {
    unit: "Kbps",
    names: ["出口", "入口"],
    lineX: [
        "2018-11-11 17:01",
        "2018-11-11 17:02",
        "2018-11-11 17:03",
        "2018-11-11 17:04",
        "2018-11-11 17:05",
        "2018-11-11 17:06",
        "2018-11-11 17:07",
        "2018-11-11 17:08",
        "2018-11-11 17:09",
        "2018-11-11 17:10",
        "2018-11-11 17:11",
        "2018-11-11 17:12",
        "2018-11-11 17:13",
        "2018-11-11 17:14",
        "2018-11-11 17:15",
        "2018-11-11 17:16",
        "2018-11-11 17:17",
        "2018-11-11 17:18",
        "2018-11-11 17:19",
        "2018-11-11 17:20",
    ],
    value: [
        [
            151, 352, 303, 534, 95, 236, 217, 123, 159, 151, 231, 192, 253, 234, 165,
            236, 527, 328, 129, 530,
        ],
        [
            256, 213, 80, 192, 330, 123, 192, 80, 250, 123, 352, 28, 225, 345, 65,
            234, 234, 108, 253, 98,
        ],
    ],
};
var color = ["rgba(23, 155, 255", "rgba(55,120,287"];
var lineY = [];

for (var i = 0; i < charts.names.length; i++) {
    var x = i;
    if (x > color.length - 1) {
        x = color.length - 1;
    }
    var data = {
        name: charts.names[i],
        type: "line",
        color: color[x] + ")",
        smooth: true,
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: color[x] + ", 0.3)",
                        },
                        {
                            offset: 0.8,
                            color: color[x] + ", 0)",
                        },
                    ],
                    false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
            },
        },
        symbol: "circle",
        symbolSize: 5,
        data: charts.value[i],
    };
    lineY.push(data);
}

lineY[0].markLine = {
    silent: true,
    data: [
        {
            yAxis: 5,
        },
        {
            yAxis: 100,
        },
        {
            yAxis: 200,
        },
        {
            yAxis: 300,
        },
        {
            yAxis: 400,
        },
    ],
};
const option = {
    backgroundColor: "",
    tooltip: {
        trigger: "axis",
    },
    legend: {
        data: charts.names,
        textStyle: {
            fontSize: 12,
            color: "rgb(0,253,255,0.6)",
        },
        right: "4%",
    },
    grid: {
        top: "14%",
        left: "4%",
        right: "4%",
        bottom: "12%",
        containLabel: true,
    },
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: charts.lineX,
        axisLabel: {
            textStyle: {
                color: "rgb(0,255,255,0.6)",
            },
            formatter: function (params) {
                return params.split(" ")[0] + "\n" + params.split(" ")[1];
            },
        },
    },
    yAxis: {
        name: charts.unit,
        type: "value",
        axisLabel: {
            formatter: "{value}",
            textStyle: {
                color: "rgb(0,253,255,0.6)",
            },
        },
        splitLine: {
            lineStyle: {
                color: "rgb(23,255,243,0.3)",
            },
        },
        axisLine: {
            lineStyle: {
                color: "rgb(0,253,255,0.6)",
            },
        },
    },
    series: lineY,
};

const updateChart = () => {
    if (chartInstance) {
        chartInstance.setOption(option);
    }
};

onMounted(() => {
    chartInstance = echarts.init(chartContainer.value);
    updateChart();
    timer = setInterval(updateChart, 1000);
    window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
    clearInterval(timer);
    window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};
</script>

<style scoped>
/* 保持原有样式不变 */
.left {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

.left-top {
    height: 25%;
    background: url('/homePageImg/tl.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    padding: 0 0 4% 0;
    font-size: 5px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0% !important;
}

.left-bottom {
    flex: 1;
}

.chart-container {
    width: 100%;
    height: 100%;
}
</style>